<div class="container-fluid">
    <div class="row">
      <div class="col bg-dark text-white">
        <a class="navbar-brand">SPORTS STORE</a>
      </div>
    </div>
  </div>
  
  <div *ngIf="orderSent" class="m-2 text-center">
    <h2>Thanks!</h2>
    <p>Thanks for placing your order.</p>
    <p>We'll ship your goods as soon as possible.</p>
    <button class="btn btn-primary" routerLink="/store">Return to Store</button>
  </div>
  <form *ngIf="!orderSent" #form="ngForm" novalidate
        (ngSubmit)="submitOrder(form)" class="m-2">
    <div class="form-group">
      <label>Name</label>
      <input class="form-control" #name="ngModel" name="name"
              [(ngModel)]="order.name" required />
      <span *ngIf="submitted && name.invalid" class="text-danger">
        Please enter your name
      </span>
    </div>
    <div class="form-group">
      <label>Address</label>
      <input class="form-control" #address="ngModel" name="address"
              [(ngModel)]="order.address" required />
      <span *ngIf="submitted && address.invalid" class="text-danger">
        Please enter your address
      </span>
    </div>
    <div class="form-group">
      <label>City</label>
      <input class="form-control" #city="ngModel" name="city"
              [(ngModel)]="order.city" required />
      <span *ngIf="submitted && city.invalid" class="text-danger">
        Please enter your city
      </span>
    </div>
    <div class="form-group">
      <label>State</label>
      <input class="form-control" #state="ngModel" name="state"
              [(ngModel)]="order.state" required />
      <span *ngIf="submitted && state.invalid" class="text-danger">
        Please enter your state
      </span>
    </div>
    <div class="form-group">
      <label>Zip/Postal Code</label>
      <input class="form-control" #zip="ngModel" name="zip"
              [(ngModel)]="order.zip" required />
      <span *ngIf="submitted && zip.invalid" class="text-danger">
        Please enter your zip/postal code
      </span>
    </div>
    <div class="form-group">
      <label>Country</label>
      <input class="form-control" #country="ngModel" name="country"
              [(ngModel)]="order.country" required />
      <span *ngIf="submitted && country.invalid" class="text-danger">
        Please enter your country
      </span>
    </div>
    <div class="text-center">
      <button class="btn btn-secondary m-1" routerLink="/cart">Back</button>
      <button class="btn btn-primary m-1" type="submit">Complete Order</button>
    </div>
  </form>
  